package fcc.Seng462project.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
/*
*the interface user would see after they login
*this class two flextable table.
*the first flextable has 3 parts, which creates basic interface layout
  *head: has user information, logout button and logo
  *body: contain the list of files that we upload
  *buttom: is the company name
* the second flextable create a list for file that we upload, which is place on body of first flextable
*/
public class ContentInterface extends FlexTable {
        
        private final FlexTable headerTable=new FlexTable();
        private final FlexTable toolbarTable=new FlexTable();
        
        public FlexTable listTable=new FlexTable();
        private final FlexTable bottomTable=new FlexTable();
        
        public final Image logImage = new Image("/image/FCC.jpg");
        public final Label idLabel=new Label("hello");
        public final HTML SignOut = new HTML("<div style='cursor:pointer' color='#2062B8'>"+"SignOut"+"</div>");
        
        public final HTML ModifyPassword = new HTML("<div style='cursor:pointer' color='#2062B8'>"
                        +"modify your password"+"</div>");
        
        public final Button searchButton=new Button();
        public final TextBox searchBox = new TextBox();
        public final Button addButton=new Button("Upload File");
        public final Button deleteAllButton=new Button();
        
        
        private final Label emtpyLabel=new Label();
        
        public ContentInterface(){
                setStyleName("center");
                headerTable.setStyleName("center");
                headerTable.setWidget(0,0,logImage);
                headerTable.setWidget(0,1,idLabel);
                headerTable.setWidget(0,2,new HTML("|"));
                headerTable.setWidget(0,3,SignOut);
                headerTable.setWidget(1,0,new HTML("<hr style='height:8px' color='#E5ECF9'>"));
                headerTable.setWidth("100%");
                headerTable.setHeight("30px");
                //headerTable.getCellFormatter().setWidth(0, 3, "80px");
                //headerTable.getCellFormatter().setWidth(0, 5, "40px");
                headerTable.getFlexCellFormatter().setColSpan(1, 0, 6);
                headerTable.getCellFormatter().setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_LEFT);
                headerTable.getCellFormatter().setHorizontalAlignment(0, 1, HasHorizontalAlignment.ALIGN_RIGHT);
                headerTable.getCellFormatter().setHorizontalAlignment(0, 2, HasHorizontalAlignment.ALIGN_RIGHT);
                //headerTable.getCellFormatter().setHorizontalAlignment(0, 3, HasHorizontalAlignment.ALIGN_RIGHT);
                //headerTable.getCellFormatter().setHorizontalAlignment(0, 4, HasHorizontalAlignment.ALIGN_RIGHT);
                //headerTable.getCellFormatter().setHorizontalAlignment(0, 5, HasHorizontalAlignment.ALIGN_RIGHT);
                
                
                emtpyLabel.setWidth("400px");
                toolbarTable.setStyleName("center");
                toolbarTable.setWidget(0, 0, emtpyLabel);
                toolbarTable.setWidget(0, 1, addButton);
                toolbarTable.setWidth("100%");
                toolbarTable.getCellFormatter().setHorizontalAlignment(0, 0,
                                HasHorizontalAlignment.ALIGN_RIGHT);
                toolbarTable.getCellFormatter().setHorizontalAlignment(0, 1,
                                HasHorizontalAlignment.ALIGN_LEFT);
                toolbarTable.getCellFormatter().setVerticalAlignment(0, 0, 
                                HasVerticalAlignment.ALIGN_BOTTOM);
                toolbarTable.getCellFormatter().setVerticalAlignment(0, 1, 
                                HasVerticalAlignment.ALIGN_TOP);
                listTable.setStyleName("center");
                //list table has 6 columns
                //which represet as file, owner,file type,size, share, and remove button
                listTable.setText(0,0,"File");
                listTable.setText(0,1, "Owner");
                listTable.setText(0,2, "File Type");
                listTable.setText(0,3,"Size");
                listTable.setText(0,4,"Share");
                listTable.setText(0, 5, "Remove");
                
                listTable.setWidth("100%");
                listTable.setCellPadding(0);
                listTable.setCellSpacing(0);
                
                
                listTable.getCellFormatter().setWidth(0, 0, "200px");
                listTable.getCellFormatter().setWidth(0, 1, "150px");
                listTable.getCellFormatter().setWidth(0, 2, "150px");
                listTable.getCellFormatter().setWidth(0, 3, "100px");
                listTable.getCellFormatter().setWidth(0, 4, "50px");
                listTable.getCellFormatter().setWidth(0, 5, "50px");
                bottomTable.setStyleName("center");
                
                
                bottomTable.setWidth("100%");
                bottomTable.setWidget(0, 0, new HTML("<hr height='2px' color='#C3D9FF'>"));
                setWidget(0,0,headerTable);
                setWidget(1,0,toolbarTable);
                setWidget(2,0,listTable);
                setWidget(3,0,bottomTable);
                
        }
}